<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :height="height"
    :fullscreen="fullscreen"
    :modal="modal"
    :mask-closable="maskClosable"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :close-on-hash-change="closeOnHashChange"
    :destroy-on-close="destroyOnClose"
    :append-to-body="appendToBody"
    :before-close="beforeClose"
  >
    <div class="detail-content" v-loading="loading">
      <template v-if="groups && groups.length > 0">
        <div
          v-for="(group, groupIndex) in groups"
          :key="groupIndex"
          class="detail-section"
        >
          <h3 v-if="group.title" class="section-heading">
            <span v-if="group.icon" class="section-icon">{{ group.icon }}</span>
            {{ group.title }}
          </h3>
          <!-- 统计卡片类型 -->
          <div
            v-if="group.type === 'statistics' && group.statistics?.items"
            class="statistics-container"
          >
            <div class="statistics-grid">
              <div
                v-for="(item, index) in group.statistics.items"
                :key="index"
                class="statistic-card"
              >
                <div class="statistic-label">{{ item.label }}</div>
                <div
                  class="statistic-value"
                  :class="{
                    'statistic-high-risk': item.colorType === 'high-risk',
                    'statistic-medium-risk': item.colorType === 'medium-risk',
                    'statistic-low-risk': item.colorType === 'low-risk',
                  }"
                >
                  {{ item.value ?? 0 }}
                </div>
              </div>
            </div>
          </div>
          <!-- 普通描述列表类型 -->
          <el-descriptions
            v-else-if="group.items && group.items.length > 0"
            :column="group.column || 2"
            :border="group.border !== false"
          >
            <el-descriptions-item
              v-for="item in group.items"
              :key="item.key"
              :label="item.label"
              :span="item.span || 1"
            >
              <!-- 自定义 slot -->
              <template v-if="item.type === 'custom' && item.slot">
                <slot :name="item.slot" :item="item" :value="item.value" />
              </template>
              <!-- 输入框类型 -->
              <template v-else-if="item.type === 'input'">
                <el-input
                  :model-value="item.value ?? item.defaultValue ?? ''"
                  :type="item.inputType === 'textarea' ? 'textarea' : 'text'"
                  :readonly="true"
                  :placeholder="item.placeholder || ''"
                  :rows="
                    item.inputType === 'textarea' ? item.rows || 3 : undefined
                  "
                />
              </template>
              <!-- 标签类型 -->
              <template v-else-if="item.type === 'tag'">
                <el-tag
                  :type="item.tagType || 'info'"
                  :size="item.tagSize || 'default'"
                  :effect="item.tagEffect || 'light'"
                >
                  {{ item.value ?? item.defaultValue ?? "-" }}
                </el-tag>
              </template>
              <!-- 默认文字类型 -->
              <template v-else>
                {{ item.value ?? item.defaultValue ?? "-" }}
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
      <div v-else class="empty-content">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <template #footer>
      <slot name="footer">
        <el-button @click="handleClose">关闭</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { DetailItem, DetailGroup } from "./types";

interface Props {
  /** 是否显示对话框 */
  modelValue: boolean;
  /** 对话框标题 */
  title: string;
  /** 详情分组列表 */
  groups: DetailGroup[];
  /** 对话框宽度 */
  width?: string | number;
  /** 对话框高度 */
  height?: string | number;
  /** 是否全屏 */
  fullscreen?: boolean;
  /** 是否显示遮罩层 */
  modal?: boolean;
  /** 点击遮罩层是否关闭 */
  maskClosable?: boolean;
  /** 点击遮罩层是否关闭 */
  closeOnClickModal?: boolean;
  /** 按下 ESC 是否关闭 */
  closeOnPressEscape?: boolean;
  /** 路由 hash 改变时是否关闭 */
  closeOnHashChange?: boolean;
  /** 关闭时是否销毁子元素 */
  destroyOnClose?: boolean;
  /** 是否追加到 body */
  appendToBody?: boolean;
  /** 关闭前的回调 */
  beforeClose?: (done: () => void) => void;
  /** 是否显示加载状态 */
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  width: "900px",
  modal: true,
  maskClosable: false,
  closeOnClickModal: false,
  closeOnPressEscape: true,
  closeOnHashChange: false,
  destroyOnClose: true,
  appendToBody: true,
  loading: false,
});

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "close"): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => {
    emit("update:modelValue", value);
    if (!value) {
      emit("close");
    }
  },
});

const handleClose = () => {
  visible.value = false;
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 64vh;
  overflow-y: auto;
  padding-right: 10px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;

    &:hover {
      background-color: #bbb;
    }
  }
}

.detail-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 12px 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;

  .section-icon {
    font-size: 16px;
  }
}

.empty-content {
  padding: 40px 0;
  text-align: center;
}

.statistics-container {
  margin-top: 12px;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.statistic-card {
  background: transparent;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  }
}

.statistic-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.statistic-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.statistic-high-risk {
  color: #f56c6c;
}

.statistic-medium-risk {
  color: #e6a23c;
}

.statistic-low-risk {
  color: #67c23a;
}
</style>
